<template>
    <div class="home">
        <div class="box1">
            <dv-border-box-11 title="数据可视化平台">
                <dv-scroll-board :config="scoreConfig"
                                 style="width:95%;height:58%;padding-left: 35px;padding-top: 55px"/>
            </dv-border-box-11>
        </div>
        <div class="box4">
            <h3>薪资TOP5</h3>
            <dv-border-box-8>
                <dv-scroll-ranking-board class="salary" :config="salaryConfig"
                                         style="width:85%;height:95%;padding-top: 10px;padding-left: 25px"/>
            </dv-border-box-8>
        </div>
        <div class="box5">
            <h3>专业人数</h3>
            <dv-border-box-12>
                <dv-active-ring-chart class="major" :config="courseConfig"
                                      style="width:90%;height:90%;padding-top: 20px;padding-left: 20px"/>
            </dv-border-box-12>
        </div>
        <div class="box6">
            <h3>就业人数</h3>
            <dv-border-box-8 :reverse="true">
                <dv-capsule-chart class="job" :config="jobConfig" style="width:85%;height:80%"/>
            </dv-border-box-8>
        </div>
    </div>
</template>

<script>
import * as  dataVisual from '@/api/home'

export default {
    name: 'HomeView',
    data() {
        return {
            scoreConfig: {},
            courseConfig: {
                data: [
                    {
                        name: 'Java',
                        value: 55
                    },
                    {
                        name: '大数据',
                        value: 120
                    },
                    {
                        name: 'WEB前端',
                        value: 78
                    },
                    {
                        name: '新媒体',
                        value: 66
                    }
                ],
                lineWidth: 8
            },
            salaryConfig: {
                data: [
                    {
                        name: '张三',
                        value: 12
                    },
                    {
                        name: '李四',
                        value: 10.5
                    },
                    {
                        name: '王五',
                        value: 13
                    },
                    {
                        name: '赵六',
                        value: 10
                    },
                    {
                        name: '新乡',
                        value: 11
                    }
                ],
                unit: 'K',
            },
            jobConfig: {
                data: [
                    {
                        name: '南阳',
                        value: 167
                    },
                    {
                        name: '周口',
                        value: 123
                    },
                    {
                        name: '漯河',
                        value: 98
                    },
                    {
                        name: '郑州',
                        value: 75
                    },
                    {
                        name: '西峡',
                        value: 66
                    },
                ],
                colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
                unit: '单位',
                showValue: true
            }
        }
    },
    methods: {
        scoreVisual() {
            dataVisual.scoreVisual().then(res => {
                if (res.code == 0) {
                    // [{},{}]
                    let {scoreList} = res.data
                    let scoreData = scoreList.map(scr => {
                        return [
                            scr.clazz,
                            scr.studentNo,
                            scr.studentName,
                            scr.examContent,
                            scr.score,
                            scr.examTime
                        ]
                    })
                    this.scoreConfig = {
                        header: ['班级', '学号', '姓名', '科目', '成绩', '考试时间'],
                        data:scoreData,
                        headerBGC: '#000000',
                        evenRowBGC: '',
                        oddRowBGC: '',
                        align: ['center', 'center', 'center', 'center', 'center', 'center']
                    }
                }
            })
        }
    },
    created() {
        this.scoreVisual()
    }
}
</script>

<style scoped>

.home {
    height: 85vh;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    background-image: url("@/assets/images/data.gif");
}

.box1, .box4, .box5, .box6 {
    padding: 0 5px;
    position: relative;
}

.box1 {
    grid-column: span 3;
}

.job {
    position: absolute;
    top: 40px;
    left: 30px;
}

h3 {
    text-align: center;
    color: white;
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
}

</style>

